<template>
	<view class="">
		<view class="column center main-wrap" :class="{ show: loaded }">
			<view class="">
				<view class="icon"><image src="/static/img/wc.png"></image></view>
				<view class="tis">恭喜您支付成功</view>
			</view>
			<view class="" style="margin-top: 100upx;">
				<view class="i-tips">恭喜您本次消费获得xx积分</view>
				<view class="i-tips-s">{{ content }}</view>
			</view>
			<view class="column" style="margin-top: 40upx;">
				<view class="btn one" @tap="toOrder(0)" hover-class="hover-opacity">查看积分详情</view>
				<view class="btn two" @tap="toOrder(1)" hover-class="hover-opacity">查看订单详情</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			content: ''
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.getPayCount();
	},
	methods: {
		async getPayCount() {
			const res = await this.$request('content/text', { type: 1 }, { showLoading: true });
			if (res.result == 0) {
				this.content = res.data.content;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		toOrder(type) {
			if (type == 0) {
				this.navTo(`/pages/point/integral`);
			} else {
				this.navTo(`/pages/order/orderdetails?id=${this.id}`);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.icon {
	width: 100%;
	margin-top: 10vh;
	image {
		width: 374upx;
		height: 241upx;
	}
}

.tis {
	width: 100%;
	margin-top: 20upx;
	font-size: 30upx;
	color: #333333;
	font-weight: bold;
}

.pay-amount {
	width: 100%;
	margin-top: 10upx;
	font-size: 32upx;
}
.i-tips {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.i-tips-s {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fe2525;
}

.btn {
	margin-top: 40upx;
	width: 267upx;
	height: 77upx;
	text-align: center;
	line-height: 77upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	border-radius: 39upx;
}
.one {
	color: #333333;
	background: #f6f6f6;
}
.two {
	background: #bec3cf;
	color: #ffffff;
}
</style>
